<template>
  <uv-popup ref="popupRef" mode="bottom" :round="12">
    <view class="popup-head">
      <view class="item" :class="{active:pickerValue.value===item.value}" v-for="item in columns" :key="item.value"
        @click="selectedPickerValue(item)">
        {{item.label}}
      </view>
    </view>
    <view class="__jiahui_picker">
      <view class="tabs">
        <view class="tab-item" @click="cancel">取消</view>
        <view class="tab-item active" @click="confirm">确定</view>
      </view>
    </view>
  </uv-popup>
</template>

<script setup>
  import {
    ref,
    defineEmits
  } from 'vue';

  defineProps({
    columns: {
      type: Array,
      default: () => []
    }
  })

  const $emit = defineEmits(['confirm'])

  const popupRef = ref(null)
  const pickerValue = ref({})

  const selectedPickerValue = (record) => pickerValue.value = record
  const cancel = () => popupRef.value.close()
  const confirm = () => {
    $emit('confirm', pickerValue.value)
    popupRef.value.close()
  }

  defineExpose({
    open: () => {
      popupRef.value.open()
    }
  })
</script>

<style lang="less" scoped>
  .popup-head {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 24px;
    position: relative;
    padding: 28px 8px 0 8px;


    &:before {
      content: '';
      width: 28px;
      height: 4px;
      border-radius: 4px;
      background-color: #D9D9D9;
      position: absolute;
      top: 8px;
      left: 50%;
      margin-left: -14px;
    }

    .item {
      width: 100%;
      line-height: 56px;
      display: flex;
      justify-content: center;
      border: 1px solid #F2EFEC;
      margin-top: 16px;
      border-radius: 12px;

      &.active {
        background-color: #F2EFEC;
      }
    }
  }

  .__jiahui_picker {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-top: 24px;
    position: relative;
    width: 100%;
    margin-bottom: 20px;

    .tabs {
      width: 232px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;

      .tab-item {
        border-radius: 6px;
        width: 116px;
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'PingFang SC';
        font-weight: 400;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.05);


        &.active {
          background: #6B483A;
          color: #fff;
          margin-left: 16px;
        }
      }
    }
  }
</style>